import React, { useEffect, useState } from 'react';
import { View, StyleSheet, ActivityIndicator, Text } from 'react-native';
import SectionTitle from '../components/SectionTitle';
import FoodCultureGrid from '../components/FoodCultureGrid';
import { fetchFoodCulture } from '../api/foodCulture';
import { COLORS } from '../styles/constants';

export default function FoodCultureListScreen({ route, navigation }) {
  const { city, cityName } = route.params || {};
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      try {
        setLoading(true);
        const fc = await fetchFoodCulture(city || '650100'); // 默认使用乌鲁木齐
        setData(fc);
      } catch (error) {
      } finally {
        setLoading(false);
      }
    })();
  }, [city]);

  return (
    <View style={styles.container}>
      <SectionTitle title={`美食·文创${cityName ? ` - ${cityName}` : ''}`} />

      {loading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#FF6B6B" />
          <Text style={styles.loadingText}>加载中...</Text>
        </View>
      ) : data.length === 0 ? (
        <View style={styles.emptyContainer}>
          <Text style={styles.emptyText}>暂无美食文创数据</Text>
        </View>
      ) : (
        <FoodCultureGrid
          data={data}
          scrollEnabled
          onPressItem={item => {
            navigation.push('FoodCultureDetail', {
              item: item, // 传递完整的美食文创数据
            });
          }}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background.secondary,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    marginTop: 12,
    fontSize: 14,
    color: COLORS.text.tertiary,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emptyText: {
    fontSize: 16,
    color: COLORS.text.quaternary,
  },
});
